<template>
  <div class="login">
    <div class="loginContainer">
      <img src="../../assets/imgs/dog.jpg" alt class="logoImg" />
      
      <div class="icon-content">
          <i :class="['iconfont', isWechat?'icon-diannaojiaobiao':'icon-erweimajiaobiao']" @click="isWechat=!isWechat" ></i>
      </div>
      
      <!-- 二维码登录 -->
      <div class="weChat-content" v-if="isWechat"> 
        <img src="../../assets/imgs/chat.png" class="wechat">
      </div>

      <el-form
        :model="loginForm"
        status-icon
        :rules="rules"
        ref="loginForm"
        label-width="100px"
        class="demo-loginForm"
        v-else
      >
     <!--  ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上，
      如果在普通的DOM元素上使用，引用指向的就是DOM元素，如果用在子组件上，引用就是组件实例 -->
        <el-form-item label="用户名" prop="username">
          <el-input
            type="text"
            v-model="loginForm.username"
            autocomplete="off"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input 
            type="password" 
            v-model="loginForm.password" 
            autocomplete="off" 
            placeholder="请输入密码"
            
            @keydown.native.enter="submitForm('loginForm')"
            ></el-input>
            <!-- keydown是原生事件，作用在组件上，如果想在vue中直接使用，可以加上 .native -->
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('loginForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 背景视频 -->
    </div>
</template>

<script>
import { login } from "../../api";

export default {
  data() {
    
    // 校验用户名
    var validateUsername = (rule, value, callback) => {
      //用户名正则，4到16位（字母，数字，下划线，减号）
      // var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
      if (value === "") {
        //test()方法用来判断是否匹配正则

        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    // 校验密码
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      isWechat:false,
      loginForm: {
        username: "",
        password: ""
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }], //trigger:blur  触发条件：失去
        password: [{ validator: validatePass, trigger: "blur" }]
      }
    };
  },
  methods: {
    //点击提交按钮触发的方法
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //本地校验通过
          //加载过渡动画
          const loading = this.$loading({
            lock: true, //是否锁住页面
            text: "拼命加载中，请稍后",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          //发送登录请求
          login(this.loginForm.username, this.loginForm.password)
            .then(res => {
              // console.log(res.data);
              //关闭过渡动画
              loading.close();
              if (res.data && res.data.state) {
                //表示用户密码正确

                this.$message({
                  showClose: true,
                  message: "恭喜你，登陆成功",
                  type: "success"  
                });
                //将用户信息存到vuex中
                this.$store.commit("SET_USERINFO", res.data.userInfo)
                //将用户权限保存在vuex中
                this.$store.commit("SET_PERMISSION_BUTTONS", res.data.permission.buttons)
                //将token传入本地
                localStorage.setItem("user-token", res.data.token);

                //将用户信息传入本地
                localStorage.setItem("user-userInfo", JSON.stringify(res.data.userInfo))

                //将用户权限传入本地
                localStorage.setItem("user-permission", JSON.stringify(res.data.permission.buttons))

                //跳转页面到主页
                this.$router.push("/Welcome");
              } else {
                //密码错误
                this.$message({
                  showClose: true,
                  message: "抱歉，账号密码错误",
                  type: "error"
                });
              }
            })
            .catch(err => {
              //关闭过渡动画
              loading.close();
              this.$message({
                showClose: true,
                message: "网络错误",
                type: "error"
              });
            });
        } else {
          //本地校验不通过
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped>
.login {
  position: relative;
  background: url("../../assets/imgs/图片12.jpg");
  /* background-color: rgba(47,64,85); */
  background-repeat: no-repeat; /*不重复*/
  background-size: 100% 100%; /* 满屏*/
}
.loginContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -175px;
  margin-left: -250px;
  width: 500px;
  height: 350px;
  background-color: rgba(47, 64, 80, 0.5);
}
.el-form {
  /* border:1px solid black; */
  margin-top: 100px;
}

.el-form-item__label {
  color: skyblue;
}
.logoImg {
  display: block;
  width: 100px;
  height: 100px;
  background-color: chartreuse;
  position: absolute;
  top: 0%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  border-radius: 50%;
  border: 5px solid #ccc;
}

/*角标二维码*/
.icon-content{
 
  width:50px;
  height:50px;
  /* background-color: red; */
  position:absolute;
  right: 0px;
}

.icon-erweimajiaobiao,.icon-diannaojiaobiao{
  font-size:50px;
  color:#fff;
}

.weChat-content{
  width:200px;
  height:200px;
  background-color: #fff;
  position:absolute;
  top: 100px;
  left:160px;
}
.weChat-content .wechat{
  display: block;
  width:200px;
  height:200px;
  border:5px solid #ccc;
}


</style>